<template>
  <div class="mains" ref="mains">
    <div class="nav">
      <ul>
        <router-link to="/find/recommend">
          <li :class="{ choosed: topName == 'recommend' }">个性推荐</li>
        </router-link>
        <router-link to="/find/song">
          <li :class="{ choosed: topName == 'song' }">歌单</li>
        </router-link>

        <router-link to="/find/rank">
          <li :class="{ choosed: topName == 'rank' }">排行榜</li>
        </router-link>
        <a>
          <li :class="{ choosed: topName == 'singer' }">歌手</li>
        </a>
        <a>
          <li :class="{ choosed: topName == 'station' }">主播电台</li>
        </a>
        <a>
          <li :class="{ choosed: topName == 'new' }">最新音乐</li>
        </a>
      </ul>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  mounted() {
    this.$store.commit("addref", this.$refs.mains);
  },
  computed: {
    topName() {
      let path = this.$route.path;
      path = path.substr(path.lastIndexOf("/") + 1);
      return path;
    },
  },
};
</script>
<style lang="less" scoped>
.mains {
  height: 100%;
  padding: 0 20px;
  overflow-y: auto;
  .nav {
    height: 40px;
    border-bottom: 1px solid rgb(225, 225, 226);
    ul {
      list-style-type: none;
      display: flex;
      width: 60%;
      margin: 0 auto;
      a {
        display: inline-block;
        height: 40px;
        width: 16.6%;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        color: black;
        .choosed {
          border-bottom: 2px solid rgb(198, 47, 47);
          color: rgb(198, 47, 47);
        }
        &:hover {
          color: rgb(198, 47, 47);
          cursor: pointer;
        }
      }
    }
  }
}
</style>
